'use strict'
import React, { Component } from 'react';
import {
	View,
	TextInput,
	StyleSheet,
	Text,
	TouchableOpacity,
	PixelRatio,
	Image
} from 'react-native';


var InputCell = React.createClass({

	render(){
		var contentDom = [];
		if(this.props.required&& this.props.required==true){
			//contentDom.push((
			//	<Text style={[inputCellStyle.title,{color:'red'}]} key={0}>
			//		{'*'}
			//	</Text>
			//	))
		}else{
			return null;
		} 
		contentDom.push((
			
			<Text style={inputCellStyle.title} key={1}>
				{this.props.title}
			</Text>)
		);
		contentDom.push((
			<TextInput
				style={inputCellStyle.input}
				secureTextEntry={this.props.secureTextEntry||false}
				key={2}
				underlineColorAndroid={'transparent'} 
				placeholder={this.props.placeholder}
				onChangeText={this.props.onChangeText}/>
			));

		if(this.props.content != undefined) contentDom.push(this.props.content);

		return(
			<View style={{backgroundColor:'white'}}>
				<View style={inputCellStyle.inputContent}>
				{contentDom}
				</View>
			</View>
		);
	},
});

var SelectCell = React.createClass({
	render(){
		return(
			<TouchableOpacity style={{backgroundColor:'white'}} onPress={()=>{this.props.touchAction()}}>
				<View style={inputCellStyle.inputContent}>
					<Text style={inputCellStyle.title}>
						{this.props.title}
					</Text>
					<Text style={inputCellStyle.value}>
						{this.props.value}
					</Text>
				</View>
			</TouchableOpacity>
		);
	},
});
var Cell  = React.createClass({

	render() {
		return (
			<View style = {{backgroundColor:'white',width:Common.size.width,}} >
				<View style = {{flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderBottomColor:Common.color.lightgrayBorderColor,marginLeft:as(15)}}>
					<Text style = {styles.cellText}>{this.props.title}</Text>
					<TextInput
						style = {styles.input}
						placeholder = {this.props.placeholder}
						underlineColorAndroid = {'transparent'}
						onChangeText = {this.props.onChangeText}
						secureTextEntry = {this.props.secureTextEntry}/>
				</View>
			</View>
		)

	}
})


var VerificationCell  = React.createClass({

	render() {
		return(
			<View style = {{backgroundColor:'white',width:Common.size.width}} >
				<View style = {{flexDirection:'row',alignItems:'center',borderBottomWidth:1,
		              borderBottomColor:Common.color.lightgrayBorderColor,marginLeft:as(15)}}>
					<Text style = {styles.cellText}>{this.props.titles}</Text>
					<TextInput
						style = {styles.input}
						placeholder = {this.props.inputTitles}
						underlineColorAndroid = {'transparent'}
						onChangeText = {this.props.onChangeTexts}
						secureTextEntry = {false}/>
					<TouchableOpacity onPress = {() => {this.props.onTouch()}} style = {{marginRight:as(10)}}>
						<Text style = {{fontSize:asFont(13),color:'black'}}>{this.props.Verification}</Text>
					</TouchableOpacity>
				</View>
			</View>
		)
	}
})

var styles = StyleSheet.create({
	content: {
		width: Common.size.width,
		height: Common.size.height,
		backgroundColor: '#F2F2F2',
	},
	cellText: {
		fontSize: asFont(16),
		width: as(80),
	},
	input: {
		flex: 1,
		height: as(43),
		paddingLeft: as(15),
		fontSize: asFont(16),
		marginTop:as(3)
	},
	touch: {
		marginLeft:(Common.size.width-as(135))/3,
		borderWidth: 2/PixelRatio.get(),
		borderRadius:as(13),
		borderColor:'blue'


	},
	images: {
		height: as(30),
		width: as(60)
	},
})
var inputCellStyle = StyleSheet.create({
	inputContent:{
		flexDirection:'row',
		marginLeft:as(15),
		width:Common.size.width-as(10),
		height:as(44),
		alignItems:'center',
		borderBottomWidth:1,
		borderBottomColor:'#dcdcdc',
		backgroundColor:'transparent',
	},
	input:{
		flex:1,
		height:as(43),
		paddingLeft:as(15),
		fontSize:asFont(16),

	},
	title:{
		fontSize:asFont(16),
		width:as(80),
	},
	value:{
		flex:1,
		fontSize:asFont(16),
		paddingLeft:as(15),
	},
});

module.exports = {
	InputCell:InputCell,
	SelectCell:SelectCell,
	Cell:Cell,
	VerificationCell:VerificationCell,
}
